<form id="Auth-Body" class="layui-form">
</form>
<script>
    var role_id = getQueryString("role_id");
    layui.use(['form'], function () {
        var form = layui.form, table = layui.table;
        //获取遍历权限规则
        $.post(api.auth.getGroupAndRole, function (res) {
            $.each(res.data, function (index, groupItem) {
                var groupHtml = '<div class="auth-item">'
                    + '<div class="auth-group">' + groupItem.rule_group_name + '</div>'
                    + '<div class="auth-rule-panel">';
                $.each(groupItem.rules, function (i, ruleItem) {
                    groupHtml += '<input type="checkbox" lay-filter="rule" rule_id="' + ruleItem.rule_id + '" name="rule" title="' + ruleItem.rule_name + '">';
                })
                groupHtml += '</div></div>';
                $("#Auth-Body").append(groupHtml);
            });
            //查看当前角色权限并重新渲染
            $.post(api.auth.getByRole, { role_id: role_id }, function (res) {
                $.each(res.data, function (index, item) {
                    var e = "#Auth-Body input[rule_id='" + item.rule_id + "']";
                    $(e).attr("checked", "checked");
                });
                form.render();
            }, 'json');
            form.render();
        }, 'json');

        form.on('checkbox(rule)', function (obj) {
            var elem = obj.elem
                , checked = elem.checked
                , rule_id = $(elem.outerHTML).attr("rule_id")
                , data = {
                    role_id: role_id,
                    rule_id: rule_id
                }
                , url = api.auth.revoke;
            if (checked) {
                url = api.auth.grant;
            }
            $.post(url, data, function (res) {
                msg(res.msg);
            }, 'json');
        });
    });
</script>
<style>
    #Auth-Body {
        padding: 20px;
    }

    .layui-layer.layui-layer-page {
        max-width: 99%;
        max-height: 95%;
        overflow: scroll;
    }

    .layui-layer.layui-layer-page::-webkit-scrollbar {
        display: none;
    }

    .auth-item {
        margin-bottom: 20px;
        box-shadow: -2px 2px 2px #888888;
        padding-bottom: 10px;
        border-radius: 10px;
    }

    .auth-item .auth-group {
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
        line-height: 40px;
        margin-bottom: 15px;
        border-bottom: 1px #888888 solid;
    }

    .auth-item .layui-form-checkbox {
        margin-bottom: 10px;
    }

    .auth-rule-panel {
        margin: 0 15px 15px 15px;

    }
</style>